<template>
  <div class="list">
    <el-input
      style="margin-bottom: 20px;"
      v-model="filterText"
      placeholder="输入树节点过滤关键词"
      clearable
      prefix-icon="el-icon-search"
      size="large"
    />

    <el-tree
      ref="treeRef"
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      :highlight-current="true"
      accordion
    >
   
    </el-tree>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { ElTree } from "element-plus";
import axios from "../../assets/js/axios";

const data = ref<Tree[]>([]);
interface Tree {
  [key: string]: any;
}

const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();

const defaultProps = {
  children: "children",
  label: "title",
};

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.title?.toLowerCase().includes(value.toLowerCase());
};

// 课程分类列表
const getList = () => {
  axios.get("/serviceedu/edu-subject/getAllSubject", {}).then((res: any) => {
    data.value = res.data.list;
  });
};
getList();
</script>

<style scoped>
.list {
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-tree {
  margin-top: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: white;
}

.custom-slot {
  padding: 5px;
  border-radius: 4px;
  transition: background 0.3s;
}

.custom-slot:hover {
  background-color: #f5f5f5;
}

.custom-tag {
  margin-right: 5px;
}
</style>